<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro"  uri="http://shiro.apache.org/tags" %>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>区域管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">

  </head>
  <style>
    .area-border{
      float: left;
      width: 16%;
      height: 720px;
      border: 1px solid #ddd;
      position: relative;
      top: 5px;
      left: 1%;
    }
    .layui-laypage-limits{
      top: -11px;
      position: relative;
    }
    .demoTable{
      position: relative;
      left: -25px;
      top: 5px;
    }
    .table_border{
      border: 1px solid #ddd;
      position: absolute;
      height: 720px;
      width: 81%;
      left: 20%;
    }
    .modular{
      font-size: 25px;
      /*font-weight: bold;*/
      color: white;
    }

    span select{
      position: relative;
      top: 11px;
    }
    .area-span{
      position: absolute;
      top: 4px;
      left: -7%;
      font-size: 20px;
    }
    span i{
      top: -5px;
      position: relative;
    }
  </style>
  <body>
  <div class="page">
    <jsp:include page="header.jsp"></jsp:include>
    <div class="page-content d-flex align-items-stretch">
      <!-- Side Navbar -->
      <jsp:include page="left.jsp"></jsp:include>
      <div class="content-inner" style="background-color: white">
        <!-- Page Header-->
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">区域管理</h2>
          </div>
        </header>
        <div class="content-box" style="background-color: white;height: 100%;" >
          <div class="area-border">
            <div id="test1" class="demo-tree demo-tree-box"></div>

          </div>
          <div class="demoTable" >
            <div class="table_border"></div>
            <div style="float: right;position: relative;left: -1%;">
              <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off" style="float: left;"  placeholder="输入区域名称">
                <button class="layui-btn" style="position: absolute;"  data-type="reload">搜索</button>
                <button class="btn green" id="add" style="margin-right: 25px;position: absolute; left: 510%;">
                  <i class="fa "></i> 添加区域
                </button>
              </div>


              <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
            </div>
          </div>
        </div>
        <!-- Page Footer-->
        <jsp:include page="footer.jsp"></jsp:include>
      </div>
    </div>
  </div>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs "  lay-filter="user" id="edit" lay-event="edit" style="color: white;background-color: #ffb822;">修改</a>
    <a class="layui-btn layui-btn-xs red"  lay-filter="user" id="del" lay-event="del" style="color: white;background-color: red;">删除</a>
  </script>
  <script>
    $("#area-menu").addClass('active');
  </script>
  <script src="${pageContext.request.contextPath}/js/area.js"></script>
  </body>
</html>